import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { NSpace, NTooltip, NButton, NIcon, NTag, NEllipsis } from 'naive-ui'
import { EditOutlined } from '@vicons/antd'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import ButtonLink from '@/components/button-link'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: t('project.workpublish.indexStr'),
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('project.workpublish.workName'),
        key: 'name',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.description'),
        key: 'description',
        align: 'center',
        width: 150,
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.description),
          ])
      },
      {
        title: t('project.workpublish.workType'),
        key: 'taskType',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.taskType),
          ])
      },
      {
        title: t('project.workpublish.owner'),
        key: 'owners',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.owners.join(',')),
          ])
      },
      {
        title: t('project.workpublish.workDetial'),
        key: 'alias',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h(
                NButton,
                {
                  circle: true,
                  type: 'info',
                  size: 'tiny',
                  style: { marginLeft: '5px' },
                  onClick: () =>
                    void onCallback({ rowData }, 'gotoDetail')
                },
                () => h(NIcon, null, () => h(EditOutlined))
              ),
          ])
      },
      {
        title: t('project.workpublish.publishTime'),
        key: 'publishTime',
        align: 'center',
        width:130,
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.updateTime),
          ])
      },
      {
        title: t('project.workpublish.opration'),
        key: 'opration',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h(
              NSpace,
              {
                justify: 'space-between',
                wrap: false,
              },
              {
                default: () =>
                  h(
                    ButtonLink,
                    {
                      onClick: () =>
                       void onCallback({ rowData }, 'offLine')
                    },
                    {
                      default: () =>
                        h(
                          () => '下线'
                        )
                    }
                  )
              },
            )
          ])
      }
    ] as TableColumns
  
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }
 
  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    columnsRef,
    createColumns
  }
}
